<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="never" name="referrer">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul,
            li {
                list-style: none;
            }

            .header {
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background: url(./img/header.png);
                height: 155px;
            }

            .footer {
                width: 100%;
                position: fixed;
                bottom: 0;
                left: 0;
                background: url(./img/footer.png);
                height: 50px;
            }

            .content {
                margin-top: 155px;
                margin-bottom: 50px;
            }

            .content_box {
                width: 95%;
                margin: 0 auto;
            }

            .daohang {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;
            }

            .daohang li {
                margin-left: 2.8rem;
                margin-right: 2.8rem;
                font-size: 0.910rem;
                color: gray;
            }

            .i_nm {
                font-weight: bold;
            }

            .i_price {
                color: red;
                font-weight: bold;
            }

            .i_addr {
                color: gray;
                font-size: 0.373rem;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .ul_film li {
                height: 100px;
            }

            .nm_price {
                margin-bottom: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }
            .item_name{
                display: inline-block;
                width: auto;
                border: 1px solid #589daf;
                margin-right: 4px;
                text-align: center;
                color: #589daf;
                font-size: 0.373rem;
                padding-left: 4px;
                padding-right: 4px;
            }
            .i_card{
                font-size: 0.373rem;
                margin-top: 4px;
                color: gray;
            }
            .i_card span{
                display: inline-block;
                width: auto;
                height: auto;
                background: #21c8f9;
                padding-right: 4px;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <myheader></myheader>
            <mycontent :film="film"></mycontent>
            <myfooter></myfooter>
        </div>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
        <script type="template" id="neirong">
            <div class="content_box">
                <div class="content">
                    <ul class="daohang">
                        <li>全城</li>
                        <li>品牌</li>
                        <li>特色</li>
                    </ul>
                    <ul class="ul_film">
                        <li v-for="i in film">
                            <div class="nm_price"><span class="i_nm">{{i.nm}}</span><span
                                    class="i_price">{{i.price}}元起</span></div>
                            <div class="i_addr">{{i.addr}}</div>
                            <div><span v-for="item in i.labels" class="item_name">{{item.name}}</span></div>
                            <div class="i_card" v-show="i.promotion.cardPromotionTag==''"></div>
                            <div class="i_card" v-show="i.promotion.cardPromotionTag!=''"><span>卡</span>{{i.promotion.cardPromotionTag}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </script>
        <script>
            var myheader = {
                template: `<div class="header"></div>`
            }
            var mycontent = {
                //在子组件接收
                props: ['film'],
                template: `#neirong`
            }
            var myfooter = {
                template: `<div class="footer"></div>`
            }

            let vm = new Vue({
                el: '#app',
                data: {
                    film: []
                },
                mounted() {
                    axios.get('./json/yingyuan.json').then(res => {
                        console.log(res.data.data.cinemas);
                        this.film = res.data.data.cinemas;
                    })
                },
                components: {
                    myheader, mycontent, myfooter
                }
            })
        </script>
    </body>
</html>